javascript - 如何将 browserify 添加到 yeoman 项目中？

Question

我想为我的 Yeoman 项目使用 browserify 而不是 RequireJS。你能告诉我如何交换它以便我的 app/和 test/可以利用 module.exports 和 require() 吗？

Answer 1

这是我做的:

1. npm install grunt-browserify --save-dev
2. npm install coffeeify --save-dev

3. 在 Gruntfile.js 中添加 grunt-browserify 步骤:

   browserify: {
       basic: {
           src: ['<%= yeoman.app %>/scripts/**/*.js', '<%= yeoman.app %>/scripts/**/*.coffee'],
           options: {
               transform: ['coffeeify']
           },
           dest: '.tmp/scripts/application.js'
       }
   }
   

4. 将步骤添加到并发/观察步骤，例如:

   concurrent: {
       server: [
           '...',
           'browserify'
       ],
       dist: [
           '...',
           'browserify'
       ]
   }
   
   watch: {
       coffee: {
           files: ['<%= yeoman.app %>/scripts/{,*/}*.coffee'],
           tasks: ['...', 'browserify']
       }
   }
   

5. 修改默认的 app/index.html 模板，因此 usemin 将连接并缩小，来自:

   <!-- build:js scripts/main.js -->
   <script src="bower_components/jquery/jquery.js"></script>
   <script src="scripts/main.js"></script>
   <!-- endbuild -->
   
   <!-- build:js(.tmp) scripts/coffee.js -->
   <script src="scripts/hello.js"></script>
   <!-- endbuild -->
   

对此:

    <!-- build:js({.tmp,app}) scripts/main.js -->
    <script src="bower_components/jquery/jquery.js"></script>
    <script src="scripts/application.js"></script>
    <!-- endbuild -->