Лучший способ использовать Babel для создания одного пакета JavaScript - PullRequest
Новая
       23

Лучший способ использовать Babel для создания одного пакета JavaScript

0 голосов
/ 21 мая 2018

У меня есть разные JSfiles, и я должен использовать Babel для создания одного JS-пакета.

Они рекомендовали мне эту 1-ю ссылку, но я не понимаю, как: https://babeljs.io/docs/usage/cli/

Просматривая в интернете, я нашел эту 2-ю ссылку: http://ccoenraets.github.io/es6-tutorial-data/babel-webpack/, которая обязывает менясначала использовать этот третий: http://ccoenraets.github.io/es6-tutorial/setup-babel/

Являются ли 2-я и 3-я ссылки жизнеспособной формой для обучения созданию единого JS-пакета?Есть ли другой хороший и простой вариант?

1 Ответ

0 голосов
/ 21 мая 2018

Я не уверен, что вы можете использовать babel в качестве упаковщика.Однако, так как вы новичок, я предлагаю заглянуть в веб-пакет.Если это опция, читайте

Ваша структура папок может быть изначально похожа на следующую: 

project folder
  |
  |-src
  |  |
  |  |- index.js
  |  |- moduleOne.js
  |  |- moduleTwo.js
  |
  |- index.html
  |- webpack.config.js

index.html 

<!doctype html>
<html>
  <head>
    <title>Sample</title>
  </head>
  <body>
    content
    <script src="dist/bundle.js"></script>
  </body>
</html>

webpack.config.js 

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
};

moduleOne.js 

export default class moduleOne {

    constructor() {
        console.log('moduleOne constructor');
    }

    someFunc(text){
        console.log(text);
    }
}

moduleTwo.js 

export default class moduleTwo {

    constructor() {
        console.log('moduleTwo constructor');
    }

    someFunc(text){
        console.log(text);
    }
}

в окне командной строки перейдите в папку проекта и введите npm install webpack --save-dev

, затем запустите webpack для объединения файлов.Это создаст папку dist с файлом bundle.js.

Теперь, если вы откроете index.html в браузере, вы должны увидеть следующий вывод консоли. 

moduleOne constructor
moduleTwo constructor
moduleOne.someFunc
moduleTwo.someFunc

InВкратце, index.js импортировал moduleOne.js и moduleTwo.js, создал их и вызвал метод someFunc().Webpack упаковал все это в dist/bundle.js.Это быстрая настройка, но, надеюсь, вы получите идею

Источник: webpack

...