前端学习环境准备 (5)开发环境大集成

Webpack

开发环境依赖

npm install babel-cli babel-core babel-preset-env babel-preset-react --save-dev

npm install webpack-cli webpack webpack-dev-server --save-dev

npm install babel-loader react-hot-loader --save-dev

逻辑库依赖

npm install react react-dom --save

简单配置

配置 `.babelrc`

1	{ "presets": ["env", "react"] }

配置 `webpack.config.js`

module.exports = {
  entry: './entry.js',
  output: {
    path: __dirname,
    filename: 'bundle.js'
  },
  devtool: 'source-map',
  module: {
    loaders: [
      { test: /\.js/, exclude: /node_modules/, loader: 'react-hot!babel' },
      { test: /\.css$/, loader: 'style!css' }
    ]
  }
};

配置 `package.json` 的 scripts 部分

1
2
3

{
  "watch": "webpack-dev-server --inline --hot"
}

Jspm

npm install jspm -g

npm install jspm --save-dev

生成配置文件

jspm init

server baseURL 是代码的相对路径, 默认是 . 当前文件夹.

jspm packages folder 是存储扩展的目录, 默认是 jspm_packages

config file path 是生成的 config 文件存储的路径和文件名, 默认是 ./config.js

client baseURL 是网站访问的根路径地址, 默认是 /

ES6 transpiler 是选择开发语言的解析器, 我选的是 babel, 随时使用 jspm dl-loader babel 进行切换, 或者重新执行 jspm init 覆盖选择.

安装依赖

jspm install react react-dom semantic-ui css