बेबेल और ग्रंट

के साथ एक परियोजना को ठीक से कैसे संकलित करें मैं बैबेल के साथ खेलने की कोशिश कर रहा हूं, लेकिन यह मेरे लिए अच्छा काम नहीं करता है।बेबेल और ग्रंट

मेरे परियोजना सरल है

|-project/ 
|---src/ 
|-----index.html 
|-----main.js 
|-----module.js 
|---Gruntfile.js 
|---package.json

index.html

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <title>Test</title> 
    <script src="main.js" type="application/javascript"></script> 
</head> 
<body> 
<p>Simple html file.</p> 
</body> 
</html>

main.js

import * as math from "./module"; 

async function anwser() { 
    return 42; 
} 

(function main() { 
    anwser().then((v) => { 
     console.info(v); 
    }); 

    console.log(math.sum(5, 5)); 
})();

module.js

export function sum(x, y) { 
    return x + y; 
}

Gruntfile.js

module.exports = function(grunt) { 

    grunt.initConfig({ 
     "babel": { 
      "options": { 
       "sourceMap": true, 
       "experimental": true 
      }, 
      dist: { 
       files: [{ 
        "expand": true, 
        "cwd": "src/", 
        "src": ["**/*.js"], 
        "dest": "build/", 
        "ext": ".js" 
       }] 
      } 
     }, 
     htmlmin: { 
      dist: { 
       options: { 
        removeComments: true, 
        collapseWhitespace: true 
       }, 
       files: [{ 
        "expand": true, 
        "cwd": "src/", 
        "src": ["**/*.html"], 
        "dest": "build/", 
        "ext": ".html" 
       }] 
      } 
     }, 
     watch: { 
      scripts: { 
       files: 'src/*.js', 
       tasks: ["babel"] 
      }, 
      html: { 
       files: 'src/*.html', 
       tasks: ["htmlmin"] 
      } 
     } 
    }); 

    grunt.loadNpmTasks('grunt-babel'); 
    grunt.loadNpmTasks('grunt-contrib-watch'); 
    grunt.loadNpmTasks('grunt-contrib-htmlmin'); 

    grunt.registerTask("default", ["babel", "htmlmin"]); 
};

मैं घुरघुराना चलाने के लिए, सब कुछ संकलन। लेकिन मैं अपेक्षित परिणाम का उपयोग नहीं कर सकता।

सबसे पहले, ब्राउज़र require is not defined कहता है, इसलिए मैं अपने HTML में require.js जोड़ता हूं।

फिर, मैं Error: Module name "module" has not been loaded yet for context: _. Use require([]) http://requirejs.org/docs/errors.html#notloaded

मिल मैं थोड़ा इन सब के बारे में उलझन में हूँ। मैं अपना कोड कैसे काम कर सकता हूं?

स्रोत

2015-02-22 Druxtan

की तरह कुछ veg_prog के जवाब पर विस्तार करने के लिए हो जाएगा, तो आप अगर Browserify की तरह कुछ का उपयोग करना चाहिए आप मॉड्यूल में अपना कोड व्यवस्थित करना चाहते हैं। ब्राउजरिफ़ का उपयोग grunt-browserify के माध्यम से ग्रंट के साथ किया जा सकता है, और 0-के माध्यम से बैबेल का उपयोग ब्राउज़रिफ़ाई के साथ किया जा सकता है।

मैं तुम्हें दिखाने के लिए अपने फ़ाइलों का भी बदलाव किया है यह कैसे किया जा सकता है:

index.html

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <title>Test</title> 
    <script src="bundle.js" type="application/javascript"></script> 
</head> 
<body> 
    <p>Simple html file.</p> 
</body> 
</html>

मुख्य।js

import "babelify/polyfill"; // Needed for Babel's experimental features. 
import * as math from "./module"; 

async function anwser() { 
    return 42; 
} 

(function main() { 
    anwser().then((v) => { 
    console.info(v); 
    }); 

    console.log(math.sum(5, 5)); 
})();

Gruntfile.js

module.exports = function(grunt) { 

    grunt.initConfig({ 
    browserify: { 
     dist: { 
     options: { 
      transform: [["babelify", { "stage": 0 }]] 
     }, 
     files: { 
      "build/bundle.js": "src/main.js" 
     } 
     } 
    }, 
    htmlmin: { 
     dist: { 
     options: { 
      removeComments: true, 
      collapseWhitespace: true 
     }, 
     files: [{ 
      "expand": true, 
      "cwd": "src/", 
      "src": ["**/*.html"], 
      "dest": "build/", 
      "ext": ".html" 
     }] 
     } 
    }, 
    watch: { 
     scripts: { 
     files: "src/*.js", 
     tasks: ["browserify"] 
     }, 
     html: { 
     files: "src/*.html", 
     tasks: ["htmlmin"] 
     } 
    } 
    }); 

    grunt.loadNpmTasks("grunt-browserify"); 
    grunt.loadNpmTasks("grunt-contrib-watch"); 
    grunt.loadNpmTasks("grunt-contrib-htmlmin"); 

    grunt.registerTask("default", ["browserify", "htmlmin"]); 
};

package.json

{ 
    "devDependencies": { 
    "babelify": "6.0.1", 
    "grunt": "0.4.5", 
    "grunt-browserify": "3.6.0", 
    "grunt-contrib-htmlmin": "0.4.0", 
    "grunt-contrib-watch": "0.6.1" 
    } 
}

स्रोत

2015-04-03 04:50:41

सबसे पहले, ब्राउज़र कहता है कि आवश्यकताएं परिभाषित नहीं की गई हैं, इसलिए मैं अपने HTML में require.js जोड़ता हूं।

मुझे नहीं लगता कि जरूरतों को जोड़ना .js समाधान होगा। इस संदर्भ में नोड-शैली वाक्यविन्यास की आवश्यकता है: (https://github.com/substack/browserify-handbook#user-content-require)।

ब्राउज़रइफ़ एक मॉड्यूल लोडर है लेकिन requjs से अलग काम करता है। requjs के लिए एक लेबल वितरण भी है, (https://github.com/mikach/requirejs-babel) लेकिन मैं ब्राउज़र का उपयोग करने की सलाह देता हूं।

एक सेटअप है, जहां कोलाहल browserify के साथ काम करने जा रहे, यह

import $ from'jquery';

की तरह कुछ इस

var $ = require('jquery');

स्रोत

2015-03-28 06:24:53

कोलाहल डिफ़ॉल्ट रूप से 'आम' का उपयोग करता है। यह requjs के लिए काम नहीं करता है। तो, 'amd' में मॉड्यूल बदलें।

"babel": { 
    "options": { 
     "sourceMap": true, 
     "experimental": true, 
     "modules": "amd"  //This is the line to be added. 
    }, 
    dist: { 
     files: [{ 
      "expand": true, 
      "cwd": "src/", 
      "src": ["**/*.js"], 
      "dest": "build/", 
      "ext": ".js" 
     }] 
    } 
}

Babel6 के लिए अद्यतन। यह भी देखें http://babeljs.io/docs/plugins/transform-es2015-modules-amd/ और https://babeljs.io/docs/plugins/

"babel": { 
    "options": { 
     "sourceMap": true, 
     "experimental": true, 
     "plugins": ["transform-es2015-modules-amd"] //This is the line to be added. 
    }, 
    dist: { 
     files: [{ 
      "expand": true, 
      "cwd": "src/", 
      "src": ["**/*.js"], 
      "dest": "build/", 
      "ext": ".js" 
     }] 
    } 
}

स्रोत

2015-05-22 20:57:19

या हो सकता है और भी बेहतर: 'UMD' –

बेबेल और ग्रंट

उत्तर

संबंधित मुद्दे